<template>
    <div>
        <div class="ECompanySearch" style="z-index:2">
            <!-- 查企业 查标签 -->
            <div class="searchConditions">
                <div class="conditions" :class="selected == 'enterprise' ? 'selected' : ''" @click="DEnterprise">
                    <span>查企业</span>
                </div>
                <div class="conditions" :class="selected == 'label' ? 'selected' : ''" @click="DLabel">
                    <span>查标签</span>
                </div>
                <div class="conditions" :class="selected == 'customs' ? 'selected' : ''" @click="DCustoms">
                    <span>查关区</span>
                </div>
            </div>
            <div class="search" :class="showInput ? 'active' : ''">
        
                <div class="input" ref="search">
                    <input type="text" :placeholder="placeholder" id="mySearch" ref="mySearch" v-model.trim="searchValue">
                </div>
                <div class="icon" @click="changeCustomerName">
                    <img src="@/assets/images/bigViewIMG/search.png" alt="">
                </div>
                <!-- <span class="clear" @click="clearValue"></span> -->
        
            </div>
            <div class="selectList" v-show="showDrop" ref="showPanel">
                <!-- title  -->
                <div class="title">
                    <div class="left">
                        <img src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
                        <span>相关企业</span>
                    </div>
                    <div class="right">
                        <span>单位：元</span>
                    </div>
                </div>
                <div class="search_table">
                    <div class="_title">
                        <div style="color:#00ffff;width:40%">企业名称</div>
                        <div style="color:#00ffff;width:20%">进口额</div>
                        <div style="color:#00ffff;width:20%">出口额</div>
                        <div style="color:#00ffff;width:20%">税额</div>
                    </div>
                    <ul>
                        <li v-for="item in headOptions" :key="item.tradeCo" @click="searchCustomer(item)">
                            <div class="_item1">{{ item.fullName }}</div>
                            <div class="_item2">{{ item.imports }}</div>
                            <div class="_item2">{{ item.exports }}</div>
                            <div class="_item2">{{ item.tax }}</div>
                        </li>
                    </ul>
                </div>
                <!-- <ul>
                    <li v-for="item in headOptions" :key="item.tradeCo" @click="searchCustomer(item)" >{{ item.fullName }}</li>
                  </ul> -->
            </div>
        
        
        </div>

      
    </div>

</template>

<script>


import { getSearchList } from '@/api/views/index.js'
import { setScreenItem } from '@/utils/screenStorage.js'
export default {
   
    
    data() {    //仿照超链，data项保留value
        return {
          
            searchValue: '',
            showSearchDialog: false,
            headOptions: [
                // { "value": "上海国贸科技有限公司",id:1 },
                // { "value": "xxxx科技有限公司",id:2 },
                // { "value": "xxxx科技有限公司",id:3 },
                // { "value": "xxxx科技有限公司",id:4},
                // { "value": "xxxx科技有限公司",id:5  },
                // { "value": "xxxx科技有限公司", id:6 },
                // { "value": "xxxx科技有限公司",id:7 },
                // { "value": "xxxx科技有限公司",id:8  },
                // { "value": "xxxx科技有限公司",id:9 },
                // { "value": "xxxx科技有限公司",id:10  },
                // { "value": "xxxx科技有限公司",id:11 },
                // { "value": "xxxx科技有限公司",id:12 },

            ],
            showInput: true,
            showDrop: false,
            placeholder: '请输入企业名称或企业编码',
            selected: 'enterprise'
        };
    },
    created() {
        document.addEventListener('click', (e) => {
            if (this.$refs.showPanel) {
                let isSelf = this.$refs.showPanel.contains(e.target)
                let searchRef = this.$refs.search.contains(e.target)

                if (!isSelf) {
                    if (searchRef) {
                        return
                    } else {
                        this.showDrop = false
                    }

                }
            }
        })
    },
    watch: {
        showInput: {
            handler(newVal) {
                if (newVal == true) {
                    // this.$refs.mySearch.focus()
                    // this.showDrop=true
                }
            }
        },
        headOptions: {
            deep: true,
            handler(newVal) {
                // console.log(newVal)
                this.showDrop = true
            }
        }
    },
    computed: {
       
    },
    mounted() {
       

       

    },
    methods: {
        // 点击查企业
        DEnterprise() {
            this.clearValue()
            this.selected = 'enterprise'
            this.placeholder = '请输入企业名称或企业编码'
        },
        // 点击查标签
        DLabel() {
            this.clearValue()
            this.selected = 'label'
            this.placeholder = '请输入标签名'
        },
        // 点击查关区
        DCustoms() {
            this.clearValue()
            this.selected = 'customs'
            this.placeholder = '请输入关区代码'
        },
        // 清除
        clearValue() {
            this.searchValue = ''
            this.$refs.mySearch.focus()
        },
        //用户点击菜单的时候
        searchCustomer(item) {
            // console.log(item)
            this.showDrop = false
            this.$router.push({
                path: "/visual/bigscreen/viewer",
                query: { reportCode: 'SecondView', company: item.fullName }
            });
            setScreenItem({ company: item.fullName })
        },
        // 点击搜索
        async changeCustomerName() {
            if (this.searchValue == '' || !this.searchValue) return
            this.showDrop = true
            if (this.selected == 'enterprise') {
                const res = await getSearchList({ tradeCoOrFullName: this.searchValue })
                // console.log('查企业', res);
                this.headOptions = res.data
            } else if (this.selected == 'label') {
                const res = await getSearchList({ enterpriseLabel: this.searchValue })
                // console.log('查标签', res);
                this.headOptions = res.data
            } else if (this.selected == 'customs') {
                const res = await getSearchList({ customsCodeOrName: this.searchValue })
                // console.log('查关区', res);
                this.headOptions = res.data
            }

        },
        // 关闭弹窗
        closeSearchDialog() {
            this.showSearchDialog = false
        },
        search() {
            if (this.searchValue !== '') {


                this.$router.push({
                    path: "/visual/bigscreen/viewer",
                    query: { reportCode: 'SecondView', company: this.searchValue }
                });
                setScreenItem({ company: this.searchValue })
                //  this.$store.dispatch('screenComponents/timeOutChangeState', this.searchValue)
                //  this.$forceUpdate()
                // window.open(routeUrl.href, "_blank");
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@keyframes select {
    0% {
        height: 0px;
    }

    100% {
        height: 200px;
    }
}


.ECompanySearch {
    // height: 50px;
    font-family: 'Poppins', sans-serif;
    position: relative;
    top: 13px;
    left: 20px;
    .searchConditions {
    
            position: absolute;
            top: -30px;
            left: 0;
            display: flex;
            font-size: 14px;
            height: 28px;
    
            .conditions {
                color: #fff;
                margin-right: 10px;
                width: 60px;
                cursor: pointer;
                padding-left: 8px;
                padding-right: 4px;
                line-height: 22px;
            }
    
            .selected {
                color: #00a5ff;
                background: url('../../../assets/images/bigViewIMG/chaqiye.png') no-repeat;
            }
        }
    
        .search {
            position: relative;
            width: 30px;
            height: 30px;
            background-color: #0041fb;
            border-radius: 8px;
            transition: 0.4s;
            box-shadow: 0 0 0 2px #007dff;
            overflow: hidden;
            // border:1px solid #
        }
    
        .search.active {
            width: 300px;
        }
    
        .search .icon {
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 30px;
            background-color: #0097fe;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            cursor: pointer;
    
            img {
                width: 20px;
                height: 20px;
            }
        }
    
    
    
        .search .input {
            position: relative;
            width: 200px;
            height: 30px;
            left: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        .search .input input {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            border: none;
            outline: navajowhite;
            font-size: 14px;
            padding: 10px 0;
            background-color: #0045ff;
            color: #fff;
        }
    
        .search .input input::-webkit-input-placeholder {
            font-size: 14px;
            color: rgba(255, 255, 255, .5);
            line-height: 20px;
        }
    
        .clear {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            width: 15px;
            height: 15px;
            right: 15px;
            /* background-color: #ff0; */
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        .clear::before {
            position: absolute;
            content: '';
            width: 1px;
            height: 15px;
            background-color: #fff;
            transform: rotate(45deg);
        }
    
        .clear::after {
            position: absolute;
            content: '';
            width: 1px;
            height: 15px;
            background-color: #fff;
            transform: rotate(315deg);
        }
    
        .selectList {
            position: absolute;
            top: 50px;
            left: 0px;
            width: 600px;
            height: 300px;
            background-color: rgba(0, 50, 163, 0.9);
            z-index: 2013;
            border-radius: 10px;
            overflow: auto;
            animation: select 0.1s;
            padding: 10px;
    
            .title {
                display: flex;
                justify-content: space-between;
                color: #fff;
                font-size: 13px;
    
                .left {
    
                    img {
                        width: 16px;
                        height: 16px;
                        margin-right: 10px;
                        // vertical-align: middle;
                    }
                }
            }
    
            .search_table {
                margin-top: 10px;
    
                ._title {
                    display: flex;
    
                }
    
                ul {
                    margin: 0;
                    padding: 0;
    
                    li {
                        // padding: 0 10px;
                        list-style: none;
                        width: 100%;
                        height: 40px;
                        text-align: center;
                        line-height: 40px;
                        color: #fff;
                        font-size: 14px;
                        display: flex;
    
                        ._item1 {
                            width: 40%;
                            cursor: pointer;
    
                        }
    
                        ._item2 {
                            width: 20%;
    
                        }
                    }
                }
    
            }
    
            //  ul {
            //   margin: 0;
            //   padding: 0;
            //     li {
            //       padding: 0 10px;
            //       list-style: none;
            //       width: 100%;
            //       height: 40px;
            //       text-align: start;
            //       line-height: 40px;
            //       color: #fff;
            //       font-size: 14px;
            //       cursor: pointer;
    
            //     }:hover {
            //       background:#0045ff;
            //       border-radius:10px ;
            //     }
            //  }
        }



}

.cardsersions-all {
    width: 400px;
    transform-origin: center top;
    z-index: 2013;
    position: absolute;
    top: 99px;
    left: 16px;
}
</style>